<template>
  <div class="editor-banner" :style="bannerStyle">
    <el-carousel 
      :height="`${props.height}px`" 
      :autoplay="props.autoplay"
      :interval="props.interval"
      :indicator-position="props.showIndicator ? 'outside' : 'none'"
      arrow="hover"
    >
      <el-carousel-item v-for="(image, index) in props.images" :key="index">
        <img :src="image" class="banner-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
import { ElCarousel, ElCarouselItem } from 'element-plus';

const props = defineProps({
  images: {
    type: Array,
    default: () => []
  },
  height: {
    type: Number,
    default: 200
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 3000
  },
  showIndicator: {
    type: Boolean,
    default: true
  },
  borderRadius: {
    type: Number,
    default: 0
  }
});

const bannerStyle = computed(() => {
  return {
    borderRadius: `${props.borderRadius}px`,
    overflow: 'hidden'
  };
});

defineOptions({
  name: 'editor-banner'
});
</script>

<style lang="scss" scoped>
.editor-banner {
  width: 100%;
  
  .banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  &:hover {
    outline: 1px dashed #ccc;
  }
  
  :deep(.el-carousel__indicators) {
    margin-top: 8px;
  }
  
  :deep(.el-carousel__button) {
    background-color: #8B4513;
  }
}
</style> 